<script setup lang="ts">
import { ApiDetail } from '@/api/api-manage/detail'
import useDictStore from '@/store/modules/dict'
import useParamsTable from '../useParamsTable'
import useResponseTable from '../useResponseTable'

defineProps<{
  data: ApiDetail
}>()

const { base_algorithm, api_request_protocol, api_request_method, api_response_type } =
  useDictStore().getDicts(
    'base_algorithm',
    'api_request_protocol',
    'api_request_method',
    'api_response_type'
  )

const paramsTable = useParamsTable()
const responseTable = useResponseTable()
// const requestParamColumns: TableColumnList = [
//   {
//     label: '结构/编号',
//     prop: 'id',
//     minWidth: 100,
//   },
//   {
//     label: '目标系统 字段名',
//     prop: 'apiName',
//     minWidth: 150,
//   },
//   {
//     label: '字段类型',
//     prop: 'requestPath',
//     minWidth: 150,
//   },
//   {
//     label: '描述',
//     prop: 'apiType',
//     minWidth: 100,
//   },
//   {
//     label: '字段必需',
//     prop: 'checkStatus',
//     minWidth: 100,
//   },
//   {
//     label: '备注',
//     prop: 'publishTime',
//     minWidth: 180,
//   },
// ]
</script>

<template>
  <div>
    <section-info title="算法基础">
      {{ base_algorithm.getLabel(data.algorithmBasic) }}
    </section-info>
    <section-info title="接口服务介绍">
      {{ data.apiIntro }}
    </section-info>
    <section-info title="参数说明">
      <section-info title="请求协议">
        {{ api_request_protocol.getLabel(data.requestProtocol) }}
      </section-info>
      <section-info title="请求方式">
        {{ api_request_method.getLabel(data.requestMethod) }}
      </section-info>
      <section-info title="编码格式">
        {{ 'UTF-8' }}
      </section-info>
      <section-info title="返回格式">
        {{ api_response_type.getLabel(data.responseType) }}
      </section-info>
      <section-info title="请求参数">
        <pure-table
          border
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="paramsTable.isLoading.value"
          :data="data.apiParamList"
          :columns="paramsTable.columns"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)',
          }"
        />
      </section-info>
      <section-info title="返回结果">
        <pure-table
          border
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="responseTable.isLoading.value"
          :data="data.apiResponseList"
          :columns="responseTable.columns"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)',
          }"
        />
      </section-info>
    </section-info>
  </div>
</template>
